<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-form-item label="账户/用户名：">
                  <el-input v-model="from.userName" placeholder="请输入账户/用户名" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="合约：">
                  <el-select v-model="from.contractId" placeholder="请选择" clearable class="selWidth">
                    <el-option v-for="item in options" :key="item.contractName" :label="item.contractName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" size="small" icon="el-icon-search" type="primary" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" icon="el-icon-refresh" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" @click="allClosePosition()">一键平仓</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" row-key="id" :data="tableData.data" style="width: 100%" size="mini"
        @selection-change="onSelectTab" highlight-current-row>
        <el-table-column :reserve-selection="true" type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="ID" min-width="100" />
        <el-table-column prop="userName" label="账号/用户名" min-width="150" />
        <el-table-column prop="symbol" label="合约" min-width="100" />
        <el-table-column prop="direction" label="方向" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.direction == 1" class="r">买</span>
            <span v-if="scope.row.direction == 2" class="g">卖</span>
          </template>
        </el-table-column>
        <el-table-column prop="volume" label="手数" min-width="100" />
        <el-table-column prop="averagePrice" label="成交均价" min-width="100" />
        <el-table-column prop="earnestMoney" label="占用保证金" min-width="100" />
        <el-table-column prop="price" label="开仓价" min-width="100" />
        <el-table-column prop="latestPrice" label="现价" min-width="100" />
        <el-table-column prop="floatPrice" label="浮动盈亏" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.floatPrice == 0">0</span>
            <span v-if="scope.row.floatPrice < 0" class="g">{{scope.row.floatPrice}}</span>
            <span v-if="scope.row.floatPrice > 0" class="r">{{scope.row.floatPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="130" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClosePosition(scope.row)">手动平仓</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
  import {
    exchangecontractGetOption
  } from '@/api/transaction'
  import {
    reportGetUserPosition,
    reportReportExit,
  } from '@/api/reportQuery'
  export default {
    data() {
      return {
        options: [],
        labelPosition: 'right',
        from: {
          userName: '',
          contractId: '',
          page: 1,
          limit: 15,
        },
        selection: [],
        loading: false,
        tableData: {
          data: [],
          total: 0
        },
        timerId: null,
      }
    },
    mounted() {
      exchangecontractGetOption().then(res => {
        console.log('合约全列表', res)
        this.options = res
        this.getlist()
      }).catch(err => {
        console.log(err)
      })
      // 创建定时器
      let that = this
      this.timerId = setInterval(() => {
        // 定时器的逻辑
        that.getlist()
      }, 10000);
    },
    beforeDestroy() {
      // 清除定时器
      if (this.timerId) {
        console.log('销毁定时器')
        clearInterval(this.timerId);
      }
    },
    methods: {
      // 选择
      onSelectTab(selection) {
        this.selection = []
        selection.forEach(item => {
          this.selection.push(item)
        })
      },
      allClosePosition() {
        if (this.selection.length == 0) {
          return this.$message.error('至少选择一项')
        }
        console.log('勾选数据', this.selection)
        this.$confirm('确认一键平仓？')
          .then(_ => {
            reportReportExit(this.selection).then(res => {
              console.log(res)
              this.$message.success('平仓成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      handleClosePosition(row) {
        console.log(row)
        this.$confirm('确认手动平仓？')
          .then(_ => {
            reportReportExit([row]).then(res => {
              console.log(res)
              this.$message.success('平仓成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      search() {
        this.from.page = 1
        this.from.limit = 15
        this.getlist()
      },
      reset() {
        this.from = {
          userName: '',
          contractId: '',
          page: 1,
          limit: 15,
        }
        this.getlist()
      },
      getlist() {
        // this.loading = true
        reportGetUserPosition(this.from).then(res => {
          console.log(res)
          this.tableData.data = res.list
          this.tableData.total = res.total
          // this.loading = false
        }).catch(err => {
          console.log(err)
          // this.loading = false
        })
      },
      pageChange(page) {
        this.from.page = page
        this.getlist()
      },
      handleSizeChange(val) {
        this.from.limit = val
        this.getlist()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btn_bt {
    border-top: 1px dashed #ccc;
    padding-top: 20px;
  }

  .r {
    color: #ff210d;
  }

  .g {
    color: #019101;
  }
</style>
